<template>
	<view class="content">
		<!-- 轮播图 -->
		<uni-swiper-dot class="uni-swiper-dot-box" :info="data" :current="current" field="content">
		  <swiper class="swiper-box" :current="swiperDotIndex" @change="changeSwiper">
		    <swiper-item v-for="(item, index) in data" :key="index">
		      <view class="swiper-item" @click="clickBannerItem(item)">
		        <image :src="item.image" mode="aspectFill" :draggable="false" />
		      </view>
		    </swiper-item>
		  </swiper>
		</uni-swiper-dot>
		
		<view class="title">{{collegeName}}</view>
		<view class="msg">{{collegeMsg}}</view>
	</view>
</template>

<script>
	export default {
		
	  data() {
	    return {
			current: 0,
			swiperDotIndex: 0,
			collegeName: null,
			collegeMsg: null,
			loading: true,
			data: [{
			    image: '/static/images/banner/banner1.png'
			  },
			  {
			    image: '/static/images/banner/banner2.png'
			  },
			  {
			    image: '/static/images/banner/banner3.jpg'
			  }
			]
	    }
	  },
	  onLoad:function(option){
		// console.log(option)
		this.collegeName = option.name
		this.collegeMsg =option.msg
		// console.log(this.collegeName)
	  },
	  methods: {
		  clickBannerItem(item) {
		    // console.info(item)
		  },
		  changeSwiper(e) {
		    this.current = e.detail.current
		  },
	  }
	}
</script>

<style lang="scss">
	page {
	  display: flex;
	  flex-direction: column;
	  box-sizing: border-box;
	  background-color: #fff;
	  min-height: 100%;
	  height: auto;
	}
	
	view {
	  font-size: 14px;
	  line-height: inherit;
	}
	
	.uni-margin-wrap {
	  width: 690rpx;
	  width: 100%;
	  ;
	}
	
	.swiper {
	  height: 300rpx;
	}
	
	.swiper-box {
	  height: 150px;
	}
	
	.swiper-item {
	  /* #ifndef APP-NVUE */
	  display: flex;
	  /* #endif */
	  flex-direction: column;
	  justify-content: center;
	  align-items: center;
	  color: #fff;
	  height: 300rpx;
	  line-height: 300rpx;
	}
	
	@media screen and (min-width: 500px) {
	  .uni-swiper-dot-box {
	    width: 400px;
	    /* #ifndef APP-NVUE */
	    margin: 0 auto;
	    /* #endif */
	    margin-top: 8px;
	  }
	
	  .image {
	    width: 100%;
	  }
	}
	
	.text {
	  text-align: center;
	  font-size: 26rpx;
	  margin-top: 10rpx;
	}
	
	.title{
		font-size: 20px;
		font-weight: 300;
		text-align: center;
		margin-bottom: 10px;
	}
	
	.msg{
		margin: 20px;
		font-size: 15px;
		text-indent: 2em;
	}
</style>